'use strict';

/**
 * @ngdoc directive
 * @name App.directive:fullscreen
 * @description
 * # fullscreen
 */
angular.module('App')
  .directive('fullscreen', ['$document', '$window', function($document, $window) {
    return {
      restrict: 'AC',
      template:'<i class="fa fa-expand fa-fw text"></i><i class="fa fa-compress fa-fw text-active"></i>',
      link: function(scope, element, attrs) {
        element.addClass('hide');

        // disable on ie11
        if (screenfull.enabled && !navigator.userAgent.match(/Trident.*rv:11\./)) {
          element.removeClass('hide');
        }

        element.on('click', function(){
          var target;
          attrs.target && ( target = $(attrs.target)[0] );
          screenfull.toggle(target);
        });

        $document.on(screenfull.raw.fullscreenchange, function () {
          if(screenfull.isFullscreen){
            element.addClass('active');
          }else{
            element.removeClass('active');
          }
        });
      }
    };
  }]);
